<template>
  <view class="container">
    <view class="input_border">
      <input
        v-model="form.cardNo"
        type="text"
        placeholder-class="placeholder"
        placeholder="快乐券号(10位)"
      >
      <view class="line" />
      <input
        v-model="form.cardPassword"
        type="text"
        placeholder-class="placeholder"
        placeholder="快乐券密码(8位)"
      >
    </view>
    <view class="tips">
      快乐券领用后请到福利中查看
    </view>
    <view class="bottom">
      <button
        class="btn"
        :loading="btnLoading"
        :disabled="btnLoading"
        @click="getCoupon"
      >
        领用
      </button>
      <!-- <view class="btn-tips">
        快乐券是什么？
      </view> -->
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        form: {
          cardNo: '',
          cardPassword: '',
        },
				btnLoading: false
			};
		},
		methods: {
      // changeInput(e, type) {
      //   // console.log('type', type, e);
      //   const value = e.target.value;
      //   this.form[type] = value;
      // },
			showError(desc, time = 1) {
				uni.showToast({
					title: desc,
					duration: time
				});
			},
			getCoupon() {
				if (!this.form.cardNo) return this.showError('请输入卡号');
				if (!this.form.cardPassword) return this.showError('请输入密码');
				if (this.form.cardNo && this.form.cardPassword) {
          console.log('调用领取快乐券', this.form.cardNo, this.form.cardPassword);
					this.btnLoading = true;
					this.$ajax({
						method: 'post',
						url: '/outing/mobile/coupon/info/receiveCoupon',
						header:'application/json',
						data: {
							cardNo: this.form.cardNo,
							cardPassword: this.form.cardPassword
						}
					}).then(res => {
						if(res.code===8200) {
							this.form.cardNo = '';
							this.form.cardPassword = '';
							uni.showToast({
								title: '快乐券领用成功',
								duration: 2
							});
						}
					}).finally(err => {
						this.btnLoading = false;
					});
				} else {
					uni.showToast({
						title: '请正确填写信息',
						duration: 2
					});
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.container {
		margin: 60upx 20upx 40upx 20upx;
	}

	.input_border {
		padding: 40upx 20upx;
		margin-bottom: 20upx;
		border: 1px solid #33333340;
		border-radius: 10upx;

		.placeholder {
			color: #33333380;
		}

		.line {
			border: 1px dashed #33333340;
			margin: 20upx;
		}
	}

	.tips {
		font-size: 24upx;
		color: #33333380;
	}

	.bottom {
		margin-top: 800upx;

		.btn {
			width: 400upx;
			height: 82upx;
			color: #FFF;
			font-size: 32upx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			text-align: center;
			line-height: 82upx;
			background: linear-gradient(135deg, #F78833 0%, #FFC77B 100%);
			border-radius: 40upx;
			margin: 0 auto;
			margin-top: 20upx;
		}

		.btn-tips {
			text-align: center;
			margin-top: 100upx;
		}
	}
</style>
